<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        background-color: rgba(255, 0, 0, 0.5);
      }
      #canvas{
        position: absolute;
        top: 0;
      right: 0;
        }
    </style>
  </head>

  <body>
    <!-- <canvas id="canvas1" width="600" height="600"> 文字不会显示 </canvas> -->
    <button>+1</button>
    <!-- <script src="./js/index.js"></script> -->

    <canvas width="40" height="40" id="canvas"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");
      // 圆心坐标
      var center = [20, 20];
      // 线长度和距离圆心距离
      var length = 8,
        offset = 8;
      // 开始绘制
      context.lineWidth = 4;
      context.lineCap = "round";
      let zks = 0;
      setInterval(() => {
        context.clearRect(0, 0, 40, 40);
        for (var angle = 0; angle < 360; angle += 45) {
        // 正余弦
        var sin = Math.sin((angle / 180) * Math.PI);
        var cos = Math.cos((angle / 180) * Math.PI);
        // 开始绘制
        context.beginPath();
        context.moveTo(center[0] + offset * cos, center[1] + offset * sin);
        context.lineTo(
          center[0] + (offset + length) * cos,
          center[1] + (offset + length) * sin
        );
        context.strokeStyle =
          "rgba(0,0,0," + (0.25 + (0.75 * angle) / 360) + ")";
        context.stroke();
      }
        zks += 45;

        // 正余弦
        var sin = Math.sin((zks / 180) * Math.PI);
        var cos = Math.cos((zks / 180) * Math.PI);
        // 开始绘制
        context.beginPath();
        context.moveTo(center[0] + offset * cos, center[1] + offset * sin);
        context.lineTo(
          center[0] + (offset + length) * cos,
          center[1] + (offset + length) * sin
        );
        context.strokeStyle = "red";
        context.stroke();
      }, 150);
     
    </script>
  </body>
</html>
